<template>
  <div>
    <el-card style="margin-bottom: 10px" shadow="never">
      <el-form :inline="true" style="display: flex">
        <el-form-item label="服务类型名称">
          <el-input
            placeholder="请输入名称"
            v-model="queryForm.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="queryForm.status"
            placeholder="请选择状态"
          >
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button @click="resetPage">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <tableList
        :list="pager.list"
        :loading="pager.loading"
        @refresh="getList"
      />
      <el-pagination v-model="pager" />
      <!-- index.vue -->
<el-pagination
  v-model:current-page="pager.currentPage"
  v-model:page-size="pager.pageSize"
  :page-sizes="pager.pageSizes"
  :total="pager.total"
  layout="total, sizes, prev, pager, next"
  @current-change="getList"
  @size-change="getList"
/>
    </el-card>
    
  </div>
</template>

<script setup>
import { ref } from "vue";
import usePagination from "@/hooks/usePagination";
import { getDoctorServiceTypeListAPI } from "@/network/doctor_service_type";
import tableList from "./c-cmps/tableList.vue";
import editDoctorServiceType from "./c-cmps/editDoctorServiceType.vue";

const queryForm = ref({
  name: '',
  status: null
});

// index.vue 中调用 usePagination 的代码
// 在调用usePagination后添加立即执行
const { pager, getList, resetPage } = usePagination({
  request: getDoctorServiceTypeListAPI,
  params: queryForm
});


console.log('开始发起初始查询请求');
getList().then(() => {
  console.log('初始查询请求完成，返回数据:', pager.list);
}).catch((error) => {
  console.error('初始查询请求失败:', error);
});
</script>

<style lang="less" scoped></style>